<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="$t('添加')" append-to-body :v-if="dialogVisible" :visible.sync="dialogVisible" width="765px" top="5vh" @close='close'>
    <div class="dialogContentBoxMaxHeight90">
      <el-form ref="form" :model="record" label-width="100px" :rules="rules" label-position="left" style="margin:0 30px;">
        <el-form-item :label="$t('动作')" class="ruleTypeForm" prop="action">
          <el-radio v-model="record.action" label="alert" class="alert">{{$t('告警')}}</el-radio>
          <el-radio v-model="record.action" label="block" class="block" style="display: inline-block;">{{$t('阻断')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('规则集类型')" class="ruleTypeForm" prop="ruleType">
          <el-select v-model="ruleType" ref="ruleTypes" size='small' filterable clearable @change="ruleTypeChange" style="width:370px;">
            <el-option v-for="item in ruleTypeList" :key="item.class_type" :label="$t(lpsNameList[item.class_type])" :value="item.class_type">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="height:500px;overflow: auto;">
          <el-table ref="multipleTable" size='mini' v-loading='loading' :data="ruleList" tooltip-effect="dark" :row-key="getRowName" @selection-change="autoDetectChange">
            <el-table-column type="selection" :reserve-selection="true" align='center' width="55"></el-table-column>
            <el-table-column prop="class_type" align='center' :label="$t('规则集类型')">
              <template slot-scope="scope">
                {{ $t(lpsNameList[scope.row.class_type]) }}
              </template>
            </el-table-column>
            <el-table-column prop="class_name" align='center' :label="$t('规则集名称')">
              <template slot-scope="scope">
                {{ $t(lpsNameList[scope.row.class_name]) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="innerAddSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="innerAddClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getRuleType, getRuleArray } from '@/api/safe/ips'
import ipsList from '../ipsArray'
import { selectClass } from '@/utils/input-class.js'
export default {
  name: 'IpsBatchDialog',
  data () {
    return {
      dialogVisible: false,
      record: {
        action: 'alert',
        name: '',
        rule: ''
      },
      recordCopy: {
        action: 'alert',
        name: '',
        rule: ''
      },
      ruleType: null,
      lpsNameList: ipsList,
      ruleTypeList: [],
      ruleList: [],
      ruleAllList: [],
      ruleDataList: [],
      loading: false,
      rules: {
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        const selectData = ['ruleTypes']
        selectClass(this.$refs, selectData)
      })
      this.loading = true
      getRuleType().then(res => {
        if (res.status === 0) {
          this.ruleTypeList = res.info
        }
      })
      getRuleArray().then(res => {
        if (res.status === 0) {
          this.ruleList = res.info[0].class_map
          this.ruleAllList = res.info[0].class_map
          this.ruleList.forEach(item => {
            item.action = 'alert'
          })
        }
        this.loading = false
      })
    },
    getRowName (row) {
      return row.class_name
    },
    autoDetectChange (data) {
      this.ruleDataList = data
    },
    ruleTypeChange (type) {
      this.ruleList = []
      if (type) {
        for (let item of this.ruleAllList) {
          if (item.class_type === type) {
            this.ruleList.push(item)
          }
        }
      } else {
        this.ruleList = this.ruleAllList
      }
      this.showSeclectRow()
    },
    showSeclectRow () {
      if (this.ruleDataList.length > 0) {
        this.ruleDataList.forEach(row => {
          this.ruleList.forEach(item => {
            if (row.class_name === item.class_name) {
              this.$refs.multipleTable.toggleRowSelection(item, true)
            }
          })
        })
      }
    },
    submit () {
      if (this.ruleDataList && this.ruleDataList.length > 0) {
        this.ruleDataList.forEach(item => {
          if (item.class_name === 'industry-scada') {
            item.action = 'alert'
          } else {
            item.action = this.record.action
          }
        })
        this.$emit('showSeclectRow', this.ruleDataList)
      } else {
        this.$messages.error(this.$t('请至少选择一条规则集'))
      }
    },
    close () {
      this.dialogVisible = false
      this.ruleType = null
      this.ruleTypeList = []
      this.ruleList = []
      this.ruleAllList = []
      this.ruleDataList = []
      this.loading = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.multipleTable.clearSelection()
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
.ruleTypeForm {
  width: 350px;
}
</style>
